/*
 * 产品类别列表
 * @Author: ljb
 * @Date: 2018-03-27 17:53:05
 * @Last Modified by: ljb
 * @Last Modified time: 2018-09-26 17:51:23
 */

<template>
	<div class="v-admin-product-category-index">

		<Table
			:columns="columns"
			:loading="loading"
			:data="categories"
			:height="tableHeight()"
			class="personal-scrollbar"
			border/>

	</div>
</template>

<script type="text/jsx">

import Button from 'iview/src/components/button';
import Icon from 'iview/src/components/icon';
import { computedTableHeight } from 'src/views/mixins/computedTableHeight';

export default {

	name: 'ProductCategoryIndex',
	mixins: [computedTableHeight],
	props: {
		loading: {
			type: Boolean,
			default() {
				return false;
			},
		},
		categories: {
			type: Array,
			default() {
				return [];
			},
		},
	},

	data() {
		return {
			columns: [
				{
					title: this.$t('category.name'),
					key: 'name',
					align: 'center',
					render: (h, { row }) => <div> { row.name || '-' } </div>,
				},
        // 新增多语言，不需要显示
				// {
				// 	title: this.$t('category.name'), // '类别常量',
				// 	key: 'const',
				// 	align: 'center',
				// 	render: (h, { row }) => <div> { row.const || '-' } </div>,
				// },
				{
					title: this.$t('category.icon'), // '普通图标',
					key: 'icon',
					align: 'center',
					render: (h, { row }) => <div>
						{
							row.icon
								? <img src={ row.icon } alt="无" width="50%"/>
								: '无'
						}
					</div>,
				},
				// {
				// 	title: this.$t('category.icon_active'), // '高亮图标',
				// 	key: 'icon_active',
				// 	align: 'center',
				// 	render: (h, { row }) => <div>
				// 		{
				// 			row.icon_active
				// 				? <img src={ row.icon_active } alt="无" width="50%"/>
				// 				: '无'
				// 		}
				// 	</div>,
				// },
				{
					title: this.$t('category.type'), // '关联素材',
					key: 'has_asset',
					align: 'center',
					render: (h, { row }) => <div>
						{
							Number(row.has_asset) === 1
								? <span>{ this.$t('category.makeup') }</span>
								: <span>{ this.$t('category.skincare') }</span>
						}
					</div>,
				},
				{
					title: this.$t('category.is_show'), //  '是否显示',
					key: 'pivot',
					align: 'center',
					render: (h, { row }) => <div>
						{
							Number(row.pivot.is_show) === 1
								? <Icon type="checkmark"></Icon>
								: <Icon type="close"></Icon>
						}
					</div>,
				},
				{
					title: this.$t('category.priority'), // '优先级',
					key: 'pivot',
					align: 'center',
					render: (h, { row }) => <div> { String(row.pivot.priority) || '-' } </div>,
				},
				{
					title: this.$t('common.created_at'), // '创建时间',
					key: 'created_at',
					align: 'center',
					render: (h, { row }) => <div> { !row.created_at ? '-' : row.created_at } </div>,
				},
				{
					title: this.$t('common.operation'), // ''操作',
					align: 'center',
					render: (h, { row }) => (
						<div>
							<Button name="index__edit" size="small" style={{ marginRight: '5px' }} on-click={() => { this.$emit('edit', row); }} type="primary">
								{ this.$t('common.edit') }
							</Button>
						</div>),
				},
			],
		};
	},
};
</script>
